<template>
  <div>
    <div class="home">

      <van-sticky :offset-top="0">
        <div class="header">
          <div class="header-left" ref="yun"><i><b>云上</b></i></div>
          <div class="header-right">
            <van-icon name="search" />
            <input type="text" placeholder="实时新闻" class="search" @click="searchnews">
          </div>
        </div>
      </van-sticky>
      <van-notice-bar scrollable mode="closeable">技术是开发它的人的共同灵魂。</van-notice-bar>

      <van-loading color="red"  v-if="loadingswi" class="pos"/>


      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-else>
        <van-swipe-item v-for="(item,index) in NewsClassslideImg" :style="{backgroundImage:`url(${item.bannerImgUrl})`}" :key="index" @click="selectNews(item.articleId)">
        </van-swipe-item>
      </van-swipe>



      <van-tabs v-model="active" swipeable sticky :offset-top="50" title-active-color="red">
        <van-tab  v-for="item in NewsClassification" :key="item.categoryId" :title="item.name">

          <van-skeleton title avatar  :row="16" :loading="loading">

            <div> <myNewslist :categoryId="item.categoryId"></myNewslist></div>

          </van-skeleton>
        </van-tab>
      </van-tabs>



    </div>
  </div>
</template>

<script>
  import {NewsClassification,NewsClassslide} from "../api/api"
  import myNewslist from "../components/Newslist"
  export default {
    name: "home",
    data(){
      return {
        active: 0,
        NewsClassification:[],
        NewsClassslideImg:[],
        loadingswi:true,
        loading:true
      };
    },
    components:{
      myNewslist,
    },
    methods:{



      // 新闻详情
      selectNews(articleId){
        this.$router.push({path:'/newsInfo',query:{id:articleId}})
      },
      // 查找新闻
      searchnews(){
        this.$router.push({path:'/selectNews'})
      }
    },
    created(){
      // 获取新闻分类
      NewsClassification(1,10).then(res=>{
        // console.log("新闻分类成功");
        this.NewsClassification=res.rows;
        // console.log(res.rows);
        // this.loading= false
      }),
              // 获取新闻轮播图
              NewsClassslide(1,10).then(res=>{
                this.NewsClassslideImg=res.rows;
                this.loadingswi=false;
              })
    },
    mounted() {
      this.loading = false;

    }



  }

</script>

<style scoped>



  .pos{
    position: absolute;
    top:48%;
    left:48%;
  }


  /*轮播*/
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    height:150px;
    text-align: center;
    background-color: #39a9ed;
  }







  .header{
    display: flex;
    align-items: center;
    background-color: rgb(238,10,36);
    height:50px;
  }
  .header-left{
    margin-left:4%;
    color:white;
    font-size:18px;
  }
  .header-right{
    width:70%;
    padding:4px 10px;
    margin-left:4%;
    background-color:white;
    border:1px solid white;
    border-radius: 16px;
  }

  .header-right>.search{
    width:92%;
    border:0;
  }
  input::-webkit-input-placeholder { /* WebKit browsers */
    /*color: #bababa;*/
    font-size:14px;
  }




</style>